<!doctype html>
<html lang="en-US">

<head>
  <link href="/assets/index.css" rel="stylesheet" type="text/css" />
  <script crossorigin="anonymous" src="/test-harness.js"></script>
  <script crossorigin="anonymous" src="/test-page-object.js"></script>
  <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  <style>
    [data-math-type=error] {
      color: #9d0000;
      border: 1px dashed currentColor;
      padding: 0.2em 0.4em;
      margin: 0 0.2em;
      border-radius: 2px;
    }
  </style>
</head>

<body>
  <template id="messages">
    <x-message>
## Display Math with ($$)

1. Basic summation:
$$ \sum\_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$

2. Matrix representation:

    $$
    \begin{pmatrix}
    a & b \\
    c & d
    \end{pmatrix}
    \begin{pmatrix}
    x \\
    y
    \end{pmatrix} =
    \begin{pmatrix}
    ax + by \\
    cx + dy
    \end{pmatrix}
    $$

3. Equation system:
    $$
    \begin{cases}
    x + y + z = 1 \\
    2x - y + z = 3 \\
    x + 2y - z = 2
    \end{cases}
    $$      
    </x-message>
    <x-message>
## Inline Math with \\(...\\)

4. Physics formulas:

- Energy: \(E = mc^2\)
- Force: \(F = ma\)
- Gravitational force: \(F = G\frac{m_1m_2}{r^2}\)

5. Complex numbers:

- Euler's formula: \(e^{ix} = \cos(x) + i\sin(x)\)
- De Moivre's formula: \((\cos\theta + i\sin\theta)^n = \cos(n\theta) + i\sin(n\theta)\)
      
    </x-message>
    <x-message>
## Display Math with \\[...\\]

6. Calculus expressions:
    \[\lim\_{h \to 0} \frac{f(x + h) - f(x)}{h} = f'(x)\]

7. Double integral:
    \[\iint_D \left(\frac{\partial Q}{\partial x} - \frac{\partial P}{\partial y}\right) dx\,dy = \oint_C P\,dx + Q\,dy\]

8. Taylor series:
    \[f(x) = \sum\_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!}(x-a)^n\]
    </x-message>
    <x-message>
## Mixed Usage Examples

9. Quantum mechanics:
   The Schrödinger equation \(\hat{H}\Psi = E\Psi\) can be written in position basis as:
   $$ -\frac{\hbar^2}{2m}\frac{d^2\Psi}{dx^2} + V(x)\Psi = E\Psi $$

10. Statistics:
    If \(X \sim N(\mu, \sigma^2)\), then its probability density function is:
    $$ f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{(x-\mu)^2}{2\sigma^2}} $$

11. Linear Algebra:
    For a matrix \(A\), its determinant can be computed as:
    \[\det(A) = \sum*{\sigma \in S_n} \text{sgn}(\sigma) \prod*{i=1}^n a\_{i,\sigma(i)}\]
    </x-message>
  </template>
  <main id="webchat"></main>
  <script>
    run(async function () {
      await host.windowSize(640, 720, document.getElementById('webchat'));

      const {
        WebChat: { renderWebChat }
      } = window; // Imports in UMD fashion.

      const { directLine, store } = testHelpers.createDirectLineEmulator();

      renderWebChat({ directLine, store }, document.getElementById('webchat'));

      await pageConditions.uiConnected();

      const messages = Array.from(window.messages.content.querySelectorAll('x-message')).map(el => el.innerText)
      for (const message of messages) {
        await directLine.emulateIncomingActivity({
          text: message,
          type: 'message'
        });
        await host.snapshot('local');
        await pageConditions.numActivitiesShown(messages.indexOf(message) + 1);
      }
    });
  </script>
</body>

</html>
